import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  NzCheckboxModule,
  NzCheckBoxOptionInterface,
} from 'ng-zorro-antd/checkbox';
import { SelectAllModel } from './select-all-model';

@Component({
  selector: 'app-checkbox-group-all-by-model',
  standalone: true,
  imports: [NzCheckboxModule, FormsModule],
  template: `<div class="demo">
    <label
      nz-checkbox
      [ngModel]="model.isAllSelected"
      (ngModelChange)="handleSelectAll($event)"
      [nzIndeterminate]="model.indeterminate"
    >
      全选
    </label>
    <nz-checkbox-group
      [(ngModel)]="model.options"
      (ngModelChange)="handleSelectItem($event)"
    />
  </div> `,
  styles: ``,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CheckboxGroupAllByModelComponent {
  model = new SelectAllModel([
    { label: '选项一', value: '1', checked: true },
    { label: '选项二', value: '2' },
    { label: '选项三', value: '3' },
    { label: '选项四', value: '4' },
  ]);

  handleSelectAll(checked: boolean): void {
    this.model.selectAll(checked);
  }

  handleSelectItem(opts: NzCheckBoxOptionInterface[]): void {
    for (const opt of opts) {
      this.model.selectItem(opt.value, opt.checked!);
    }
  }
}
